import React from 'react';
import classnames from 'classnames';
import ToolBar from './ToolBar';
import ImageViewer from './ImageViewer';
import PdfViewer from './PdfViewer';
import OfdViewer from './OfdViewer';
import EmptyViewer from './EmptyViewer';
import Nav from './Nav';
import Loader from './Loader';
import clsName from './lib/clsname';
import useGenActiveInvoice from './hooks/useGenActiveInvoice';
import useToolFns from './hooks/useToolFns';
/**
 * @param invoicesExtInfo 发票额外数据,为了不修改invoices的业务数据，额外引入这个入餐
 */
function InvoiceViewer(props) {
    const { invoices, closeAble, theme = 'dark', invoicesExtInfo = [], lang, onChange, defineTools, onClose, emptyRender } = props;
    const { toolFns, setToolFns, isFullScreen } = useToolFns();
    const { activeKey, setActiveKey, activedFile, activeFileType } = useGenActiveInvoice(invoices, props.activeKey, invoicesExtInfo, onChange);
    const viewCls = classnames(clsName.name, {
        fullscreen: isFullScreen,
    });
    return (
        <div className={viewCls}>
            <ToolBar activedFile={activedFile} toolFns={toolFns} defineTools={defineTools} onClose={onClose} closeAble={closeAble} theme={theme} />
            <div className={`${clsName.name}-main`}>
                {activeFileType === 'pdf' && !activedFile.loading ? <PdfViewer invoice={activedFile} setToolFns={setToolFns} key={activedFile.invoiceDataCode} /> : null}
                {activeFileType === 'img' && !activedFile.loading ? <ImageViewer invoice={activedFile} setToolFns={setToolFns} key={activedFile.invoiceDataCode} /> : null}
                {activeFileType === 'ofd' && !activedFile.loading ? <OfdViewer invoice={activedFile} setToolFns={setToolFns} key={activedFile.invoiceDataCode} /> : null}
                {['xml', 'empty'].includes(activeFileType) ? <EmptyViewer invoice={activedFile} lang={lang} emptyRender={emptyRender} /> : null}
                {activedFile.loading ? <Loader /> : null}
            </div>
            <Nav invoices={invoices} activeKey={activeKey} setActiveKey={setActiveKey} theme={theme} />
        </div>
    )
}
export default InvoiceViewer;